const wxHttpHandler = require('../../utils/wxHttpHandler.js');
const api = require('../../APIConfig/apiConfig.js');
import * as echarts from '../../ec-canvas/echarts';
var app = getApp();



Page({
  data: {
    vehicleId: -1,
    terminalId: -1,
    startTime: null,
    endTime: null,
    ec: {
      // 将 lazyLoad 设为 true 后，需要手动初始化图表
      lazyLoad: true
    },
    details: null,
    timeList: [], //时间轴
    tempList1: [], //一区温度
    tempList2: [], //二区温度
    tempList3: [], //三区温度
    tempList4: [], //四区温度
    tempList5: [], //五区温度
    locations: [], //位置
    markers: [], //当前显示的marker
    myChart: null,
    latitude: -1,
    longitude: -1,
  },

  onLoad: function (options) {
    let that = this
    this.setData({
      vehicleId: options.vehicleId,
      terminalId: options.terminalId,
      startTime: options.startTime,
      endTime: options.endTime,
    })
    this.echartsComponnet = this.selectComponent('#mychart-dom-line');
    this.init_echarts()
    this.getColdBoxTemperatureHistoryMonitorInfo()
  },

  onShow: function () {},

  //运输监控-车辆历史温控详情
  getColdBoxTemperatureHistoryMonitorInfo: function () {
    let data = {
      vehicleId: this.data.vehicleId,
      terminalId: this.data.terminalId,
      startTime: this.data.startTime,
      endTime: this.data.endTime
    }
    const that = this
    wxHttpHandler({
      type: 'get',
      path: api.getHistoryVehicleTemperatureMonitorListInfo,
      data: data,
      fn: function (res) {
        if (res.code == 0) {
          if (res.data != null) {
            that.setData({
              details: res.data
            })
            let marksTem = []
            that.data.details.forEach(element => {
              that.data.timeList.push(element.acquisitionTime.substring(11, 19))
              that.data.tempList1.push(element.area1)
              that.data.tempList2.push(element.area2)
              that.data.tempList3.push(element.area3)
              that.data.tempList4.push(element.area4)
              that.data.tempList5.push(element.area5)
              marksTem.push({
                latitude: element.latitude,
                longitude: element.longitude,
                iconPath: "../../assets/images/home/car.png",
                width: 20,
                height: 10,
                anchorX: 0,
                anchorY: 0
              })
            });

            let marker = []
            marker.push(
              marksTem[0]
            )
            that.setData({
              latitude: marksTem[0].latitude,
              longitude: marksTem[0].longitude,
              markers: marker,
              locations: marksTem
            })


            that.init_echarts()
          }
          wx.hideLoading()
        } else {
          wx.hideLoading()
          wx.showToast({
            title: res.desc,
            icon: 'none',
            duration: 1500,
            mask: true
          });
        }
      }

    })
  },

  //初始化图表
  init_echarts: function () {
    let that = this
    this.echartsComponnet.init((canvas, width, height, dpr) => {
      // 初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr //解决小程序视图模糊的问题，必写
      });
      chart.setOption(this.getOption());
      chart.on('click', 'series', function (params) {
        let marker = []
        marker.push(
          that.data.locations[params.dataIndex]
        )

        that.setData({
          latitude: that.data.locations[params.dataIndex].latitude,
          longitude: that.data.locations[params.dataIndex].longitude,
          markers: marker
        })
      })
      chart.on('mousemove', 'series', function (params) {
        let marker = []
        marker.push(
          that.data.locations[params.dataIndex]
        )
        that.setData({
          latitude: that.data.locations[params.dataIndex].latitude,
          longitude: that.data.locations[params.dataIndex].longitude,
          markers: marker
        })
      })

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
      s
    });
  },

  // 获取数据
  getOption: function () {
    var that = this
    var option = {
      title: {
        text: '',
        left: ''
      },
      color: ["#41CBA6", "#FFB540","#ADD8E6","#808000","#CD5C5C"],
      legend: {
        data: ['一区', '二区','三区','四区','五区'],
        top: 10,
        icon: 'rect',
        textStyle: {
          fontSize: 12,
          color: "#666"
        },
        left: 'center',
        z: 100
      },
      grid: {
        // containLabel: true
        x: 35,
        x2: 5,
        y: 40,
        y2: 40
      },
      tooltip: {
        show: true,
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        axisLine: {
          lineStyle: {
            color: "#AAAAAA"
          }
        },
        axisLabel: {
          interval: 4,
          rotate: 40
        },
        axisTick: {
          lineStyle: {
            type: 'dashed',
            color: "#DDDDDD",
            width: 2
          }
        },
        boundaryGap: false,
        data: that.data.timeList,
        // show: false
      },
      yAxis: {
        x: 'center',
        type: 'value',
        axisLine: {
          lineStyle: {
            color: "#AAAAAA"
          }
        },
        splitLine: {
          lineStyle: {
            type: 'dashed'
          }
        }
        // show: false
      },
      series: [{
        name: '一区',
        type: 'line',
        smooth: true,
        data: that.data.tempList1,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#41CBA6" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }, {
        name: '二区',
        type: 'line',
        smooth: true,
        data: that.data.tempList2,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#FFB540" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      },
      {
        name: '三区',
        type: 'line',
        smooth: true,
        data: that.data.tempList3,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#ADD8E6" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      },
      {
        name: '四区',
        type: 'line',
        smooth: true,
        data: that.data.tempList4,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#808000" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      },
      {
        name: '五区',
        type: 'line',
        smooth: true,
        data: that.data.tempList5,
        areaStyle: {
          normal: {
            color: {
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: "#CD5C5C" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#ffffff" // 100% 处的颜色
              }],
              globalCoord: false // 缺省为 false
            }
          }
        }
      }
    ]
    }
    return option
  },

})